import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import Input from '@kuiper-components/input';

import s from './RadioPane.module.css';

function RadioPane({ className, value, size, onChange, children }) {
	return (
		<div className={cn(className, s.radioPane, s[size])}>
			{children.map(x => (
				<div
					key={x.key}
					className={cn(s.pane, { [s.active]: value === x.key })}
					onClick={() => {
						if (value === x.key) return;
						onChange(x.key);
					}}
				>
					<div className={s.header}>
						<Input type="radio" checked={value === x.key} />
						<div className={s.label}>{x.props.label}</div>
					</div>
					<div className={s.content}>{x.props.children}</div>
				</div>
			))}
		</div>
	);
}

RadioPane.propTypes = {
	className: PropTypes.string,
	size: PropTypes.oneOf(['normal', 'small']),
	value: PropTypes.string.isRequired,
	children: PropTypes.arrayOf(PropTypes.node),
	onChange: PropTypes.func.isRequired,
};
RadioPane.defaultProps = {
	className: s.radioPane,
	size: 'normal',
};

export default RadioPane;
